import React from 'react';
import {
  ProFormText,
  DrawerForm,
} from '@ant-design/pro-form';
import { useIntl, FormattedMessage } from 'umi';

// 定义value的类型，
export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<API.HostsInfoListItem>;

// const [addHostModalVisible, handleAddHostModalVisible] = useState<boolean>(false);

export type UpdateDrawerFormProps = {
  // onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  // 抽屉组件props里只有onClose 没有onCancle
  onClose: () => void;
  onSubmit: (values: FormValueType) => Promise<void>;
  onVisibleChange: (visible: boolean) => void;
  updateHostDrawerVisible: boolean;
  // 更新host信息是有values值要传递的
  values: Partial<API.HostsInfoListItem>;
};

const UpdateDrawerForm: React.FC<UpdateDrawerFormProps> = (props) => {
  const intl = useIntl();
  return (
    <>
      <DrawerForm
        title={intl.formatMessage({
          id: 'pages.listHostsInfoTable.addHostForm.newHost',
          defaultMessage: 'New Host',
        })}

        // 此ModalForm是否显示，由父组件中 addHostModalVisible 管理
        // 当visible状态改变时候，由onVisibleChange来处理下一步动作，传给父组件
        visible={props.updateHostDrawerVisible}
        onVisibleChange={props.onVisibleChange}
        onFinish={props.onSubmit}
        drawerProps={{
          forceRender: true,
          destroyOnClose: true,
          onClose: () => {
            props.onClose();
          },
        }}
        width="300px"
      // 切勿在这使用iniialValues,异步传输,只会显示上一个状态值
      // initialValues={props.values}
      >
        <ProFormText
          width="md"
          name="id"
          label={
            <FormattedMessage
              id="pages.listHostsInfoTable.id"
              defaultMessage="ID"
            />
          }
          disabled
          initialValue={props.values.id}
        />

        <ProFormText
          width="md"
          name="hostname"
          disabled
          label={
            <FormattedMessage
              id="pages.listHostsInfoTable.hostname"
              defaultMessage="Host"
            />
          }
          initialValue={props.values.hostname}
        />

        <ProFormText
          width="md"
          name="ip"
          label={
            <FormattedMessage
              id="pages.listHostsInfoTable.ip"
              defaultMessage="IP"
            />
          }
          initialValue={props.values.ip}
        />

        <ProFormText
          width="md"
          name="username"
          label={
            <FormattedMessage
              id="pages.listHostsInfoTable.username"
              defaultMessage="Username"
            />
          }
          initialValue={props.values.username}
        />

        <ProFormText
          width="md"
          name="password"
          label={
            <FormattedMessage
              id="pages.listHostsInfoTable.password"
              defaultMessage="Password"
            />
          }
          initialValue={props.values.password}
        />

        <ProFormText
          width="md"
          name="os"
          label={
            <FormattedMessage
              id="pages.listHostsInfoTable.os"
              defaultMessage="OS"
            />
          }
          initialValue={props.values.os}
        />

        <ProFormText
          width="md"
          name="arch"
          label={
            <FormattedMessage
              id="pages.listHostsInfoTable.arch"
              defaultMessage="Arch"
            />
          }
          initialValue={props.values.arch}
        />

        <ProFormText
          width="md"
          rules={[
            {
              required: true,
              message: (
                <FormattedMessage
                  id="pages.searchTable.ruleName"
                  defaultMessage="Rule name is required"
                />
              ),
            },
          ]}
          name="port"
          label={
            <FormattedMessage
              id="pages.listHostsInfoTable.port"
              defaultMessage="PORT"
            />
          }
          initialValue={props.values.port}
        />
      </DrawerForm>
    </>
  );
};

export default UpdateDrawerForm